import React, { useEffect, useState } from "react";
import { Swiper, Image } from "antd-mobile";
import { recommends } from "@/api/Home";
import style from "./recommend.module.scss";
import { useNavigate } from "react-router-dom";

// 定义类型
type recommendsType = {
  extra: any;
  styleItem: any;
  styleBanner: any;
  categoryList: any;
  kingKongList: any;
  id: number;
  name: string;
  onlineTime: number;
  originSchemeUrl: string;
  picUrl: string;
  targetUrl: string;
  desc: string;
  icon: string;
  schemeUrl: string;
  text: string;
  textColor: string;
  activityPrice: string;
  originPrice: string;
  subTitle: string;
  title: string;
  tag: string;
  categoryName: string;
  kingKongModule: any;
};
const recommend = () => {
  // 接收数据
  // const [recommendsArr, setRecommendsArr] = useState<Array<recommendsType>>([]);
  const [recommendsArr, setRecommendsArr] = useState<any>({});

  const navigate = useNavigate();
  // 发送请求
  useEffect(() => {
    recommends().then((res) => {
      if (res.data.code === "200") {
        setRecommendsArr(res.data.data.data);
      }
    });
  }, []);

  // 轮播数据
  const BannerArr = Object.entries(recommendsArr)
    .splice(5, 1)
    .map((val) => val[1]) // 把轮播需要的数据映射出来
    .flat(); // 转成一维数组

  // 循环轮播图数据
  const newBannerArr = BannerArr.map((val: any, idx) => {
    return (
      <Swiper.Item key={idx}>
        <Image src={val.picUrl} />
      </Swiper.Item>
    );
  });

  return (
    <div>
      {/* 轮播图 */}
      <Swiper loop style={{ height: 150 }} autoplay>
        <Swiper.Item>{newBannerArr}</Swiper.Item>
      </Swiper>
      {/* 服务 */}
      <div className={style.indexServicePolicy}>
        <ul>
          {recommendsArr.policyDescList &&
            recommendsArr.policyDescList.map((val: recommendsType) => {
              return (
                <li key={val.icon}>
                  <Image src={val.icon} width={20} />
                  <span>{val.desc}</span>
                </li>
              );
            })}
        </ul>
      </div>
      {/* 格子区域 */}
      <div className={style.kingKongList}>
        <ul>
          {!!recommendsArr.kingKongModule &&
            recommendsArr.kingKongModule.kingKongList.map(
              (val: recommendsType) => {
                return (
                  <li key={val.schemeUrl}>
                    <Image src={val.picUrl} width={70} />
                    <span>{val.text}</span>
                  </li>
                );
              }
            )}
        </ul>
      </div>
      {/* 福利区域 */}
      <div className={style.page_content}>
        <div className={style.text}>- 新人专享礼 -</div>
        <div className={style.content}>
          <div className={style.left}>
            <p>新人专享礼包</p>
            <div className={style.imgWrap}>
              <Image
                src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png"
                style={{ width: 130 }}
              ></Image>
              <Image
                src="https://yanxuan.nosdn.127.net/3f7e731c6650bc1770589c78bd5a18b7.png"
                style={{ width: 15, position: "relative", top: 50, left: -48 }}
              ></Image>
            </div>
          </div>
          <div className={style.big_two}>
            {recommendsArr.indexActivityModule &&
              recommendsArr.indexActivityModule.map((val: recommendsType) => {
                return (
                  <div className={style.right} key={val.picUrl}>
                    <div className={style.main}>
                      <div>
                        <span>{val.title}</span>
                        <span>{val.subTitle}</span>
                        <div className={style.img_img}>
                          <Image
                            src={val.picUrl}
                            width={100}
                            style={{ position: "relative", right: 10, top: 10 }}
                          />
                        </div>
                        <div className={style.border_radius}>
                          <span>{val.activityPrice}</span>
                          <span style={{ textDecoration: "line-Through" }}>
                            {val.originPrice}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
          </div>
        </div>
      </div>
      {/* 类目热销榜 */}
      <div className={style.categoryHotSellModule}>
        <p>类目热销榜</p>
        <ul>
          {recommendsArr.categoryHotSellModule &&
            recommendsArr.categoryHotSellModule.categoryList.map(
              (val: any, idx: string) => {
                return (
                  <li key={idx}>
                    <span
                      id={val.extra.operationResource.categoryId}
                      onClick={(e: any) => {
                        // 跳转路由
                        navigate("/RanKing/" + e.target.id);
                      }}
                    >
                      {val.categoryName}
                    </span>
                    <Image src={val.picUrl} width={70} />
                  </li>
                );
              }
            )}
        </ul>
      </div>
      {/* 底部产品数据 */}
      <div className={style.lazy_component}>
        {recommendsArr.sceneLightShoppingGuideModule && (
          <div className={style.left}>
            <span>
              {recommendsArr.sceneLightShoppingGuideModule[0].styleBanner.title}
            </span>
            <span>
              {recommendsArr.sceneLightShoppingGuideModule[0].styleBanner.desc}
            </span>
            <Image
              src={
                recommendsArr.sceneLightShoppingGuideModule[0].styleBanner
                  .picUrl
              }
              width={80}
            />
          </div>
        )}
        {recommendsArr.sceneLightShoppingGuideModule && (
          <div className={style.right}>
            <span>
              {recommendsArr.sceneLightShoppingGuideModule[1].styleItem.title}
            </span>
            <span>
              {recommendsArr.sceneLightShoppingGuideModule[1].styleItem.desc}
            </span>
            <div style={{ display: "flex" }}>
              <Image
                src={
                  recommendsArr.sceneLightShoppingGuideModule[1].styleItem
                    .picUrlList[0]
                }
                width={80}
                style={{ marginLeft: 20 }}
              />
              <Image
                src={
                  recommendsArr.sceneLightShoppingGuideModule[1].styleItem
                    .picUrlList[1]
                }
                width={80}
                style={{ marginLeft: 20 }}
              />
            </div>
          </div>
        )}
      </div>
      <div className={style.bottom_bottom}>
        <div className={style.cen}>
          <span>下载APP</span>
          <span>电脑版</span>
        </div>
        <p>
          网易公司版权所有 © 1997-2023
          <br />
          食品经营许可证：JY13301080111719
        </p>
      </div>
    </div>
  );
};

export default recommend;
